// 审核计划表
<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="年份">
                <el-date-picker type="year" v-model="queryParams.auditYear" format="yyyy" value-format="yyyy"
                    :style="{ width: '100%' }" placeholder="请选择年份" clearable></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                    v-hasPermi="['manageAudit:housekeep:add']">新增</el-button>
            </el-col>
            <!-- <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport"
                    v-hasPermi="['manageAudit:housekeep:export']">导出</el-button>
            </el-col> -->
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="printBox"
                    v-hasPermi="['manageAudit:housekeep:printJCB']">打印检查表</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-download" size="mini" @click="printBox1"
                    v-hasPermi="['manageAudit:housekeep:printTZ']">打印台账</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table @selection-change="handleSelectionChange" fit v-loading="loading" border :data="dataList">
            <el-table-column type="selection" width="55" align="center" />
            <!-- <el-table-column show-overflow-tooltip label="流程状态" width="100">
        <template slot-scope="scope">
          <el-tag size="mini">{{ scope.row.statusName }}</el-tag>
        </template>
      </el-table-column> -->


            <!-- <el-table-column min-width="200" show-overflow-tooltip label="年度">
        <template slot-scope="scope">
          <span>{{ scope.row.auditYear }}年度管理评审工作计划</span>
        </template>
      </el-table-column> -->

            <el-table-column show-overflow-tooltip label="受检查部门" prop="deptName" min-width="120" />
            <el-table-column show-overflow-tooltip label="部门负责人" prop="deptLeaderName" min-width="120" />
            <el-table-column show-overflow-tooltip label="检查日期" min-width="150" prop="checkTime" />

            <el-table-column show-overflow-tooltip label="检查人" min-width="120" prop="checkUserName" />
            <el-table-column show-overflow-tooltip label="安全情况" min-width="120" prop="safeCondition" />
            <el-table-column show-overflow-tooltip label="消防情况" min-width="120" prop="fireCondition" />
            <el-table-column show-overflow-tooltip label="有毒化学药品管理情况" min-width="120" prop="chemistryManageCondition" />
            <el-table-column show-overflow-tooltip label="三废情况" min-width="120" prop="threeWasteCondition" />
            <el-table-column show-overflow-tooltip label="水电情况" min-width="120" prop="waterElectricCondition" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="240" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-view" v-hasPermi="['manageAudit:housekeep:info']"
                        @click="handleDetail(scope.row)">详情</el-button>

                    <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
                        v-hasPermi="['manageAudit:housekeep:edit']">修改</el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
            @pagination="getList" />
        <el-dialog :visible.sync="openFile" :title="type == 1 ? '首次签到表' : type == 2 ? '末次签到表' : '总结报告'" width="800"
            append-to-body>
            <el-form :disabled="isEdit" ref="elForm" :model="formData" :rules="rules" size="medium" label-width="120px">
                <el-form-item label="" prop="filePath">
                    <fileUpload :isDelete="!isEdit" v-model="formData.filePath"></fileUpload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" v-if="!isEdit">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="openFile = false">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 打印模板位置 -->
        <PrintBox :checkNum="9" :printRow="printList" id="printBox">
            <template slot="title" slot-scope="scope">
                <div style="margin-bottom: 20px">安全作业及内务管理检查表 STET/B/16-1</div>
            </template>
            <template slot-scope="scope">
                <!-- 表格  class  table-page  必须-->
                <table style="border-collapse: collapse; table-layout: fixed" border="1" cellspacing="0" class="table-page">
                    <tr>
                        <td style="width:30mm">受检查部门</td>
                        <td style="width:80mm">
                            {{ scope.item.deptName }}
                        </td>
                        <td style="width:30mm">部门负责人</td>
                        <td style="width: 75mm;">
                            {{ scope.item.deptLeaderName }}
                        </td>
                    </tr>
                    <tr>
                        <td>检查人员</td>
                        <td>
                            {{ scope.item.checkUserName }}
                        </td>
                        <td>检查日期</td>
                        <td>
                            {{ scope.item.checkTime }}
                        </td>
                    </tr>
                    <tr style="height:45mm">
                        <td>安全情况</td>
                        <td colspan="3" style="text-align: left;">
                            <div>
                                {{ scope.item.involveSafe == 0 ? '不涉及该检查项' : '' }}
                            </div>
                            <div v-if="scope.item.involveSafe == 1">
                                自查：{{ scope.item.safeCondition }}
                            </div>
                            <div style="display: flex;align-items: center;" v-if="scope.item.involveSafe == 1">
                                检查结果： <input type="checkbox" :checked="scope.item.safeConditionResult == 1" />符合
                                <input type="checkbox" :checked="scope.item.safeConditionResult == 0" />不符合管理制度要求

                            </div>
                        </td>
                    </tr>
                    <tr style="height:45mm">
                        <td style="width:30mm">消防情况</td>
                        <td colspan="3" style="text-align: left;">
                            <div>
                                {{ scope.item.involveFire == 0 ? '不涉及该检查项' : '' }}
                            </div>
                            <div v-if="scope.item.involveFire == 1">
                                自查：{{ scope.item.fireCondition }}
                            </div>
                            <div style="display: flex;align-items: center;" v-if="scope.item.involveFire == 1">
                                检查结果： <input type="checkbox" :checked="scope.item.fireConditionResult == 1" />符合
                                <input type="checkbox" :checked="scope.item.fireConditionResult == 0" />不符合管理制度要求

                            </div>

                        </td>
                    </tr>
                    <tr style="height:50mm">
                        <td style="width:30mm">有毒化学药品管理情况</td>
                        <td colspan="3" style="text-align: left;">
                            <div>
                                {{ scope.item.involveChemistry == 0 ? '不涉及该检查项' : '' }}
                            </div>
                            <div v-if="scope.item.involveChemistry == 1">
                                自查：{{ scope.item.chemistryManageCondition }}
                            </div>
                            <div style="display: flex;align-items: center;" v-if="scope.item.involveChemistry == 1">
                                检查结果： <input type="checkbox" :checked="scope.item.chemistryManageConditionResult == 1" />符合
                                <input type="checkbox" :checked="scope.item.chemistryManageConditionResult == 0" />不符合管理制度要求

                            </div>

                        </td>
                    </tr>
                    <tr style="height:40mm">
                        <td style="width:30mm">“三废”处置情况</td>
                        <td colspan="3" style="text-align: left;">
                            <div>
                                {{ scope.item.involveThreeWaste == 0 ? '不涉及该检查项' : '' }}
                            </div>
                            <div v-if="scope.item.involveThreeWaste == 1">
                                自查：{{ scope.item.threeWasteCondition }}
                            </div>
                            <div style="display: flex;align-items: center;" v-if="scope.item.involveThreeWaste == 1">
                                检查结果： <input type="checkbox" :checked="scope.item.threeWasteConditionResult == 1" />符合
                                <input type="checkbox" :checked="scope.item.threeWasteConditionResult == 0" />不符合管理制度要求

                            </div>
                        </td>
                    </tr>
                    <tr style="height:40mm">
                        <td style="width:30mm">水电情况</td>
                        <td colspan="3" style="text-align: left;">
                            <div>
                                {{ scope.item.involveWaterElectric == 0 ? '不涉及该检查项' : '' }}
                            </div>
                            <div v-if="scope.item.involveWaterElectric == 1">
                                自查：{{ scope.item.waterElectricCondition }}
                            </div>
                            <div style="display: flex;align-items: center;" v-if="scope.item.involveWaterElectric == 1">
                                检查结果： <input type="checkbox" :checked="scope.item.waterElectricResult == 1" />符合
                                <input type="checkbox" :checked="scope.item.waterElectricResult == 0" />不符合管理制度要求

                            </div>

                        </td>
                    </tr>


                </table>
                <!-- 底部信息位置 -->
                <div class="page-bottom" style="">
                    <div class="desc">注：如果出现不符合情况应按不符合工作处理。</div>
                    <div class="desc" style="color: #666;font-size: 12px;">注：本表格自2021年6月1日起生效</div>
                </div>
               
            </template>
        </PrintBox>

        <!-- :checkLabel="'contentList'" -->
        <PrintBox :checkNum="5" :printRow="printList1" :checkLabel="'contentList'" :isVertical="false" id="printBox1">
            <template slot="title" slot-scope="scope">
                <div>安全工作台账 STET/B/16-2</div>
            </template>
            <template slot-scope="scope">
                <!-- {{ scope.item }} -->
                <!-- 表格  class  table-page  必须-->
                <table style="border-collapse: collapse; table-layout: fixed" border="1" cellspacing="0" class="table-page">
                    <tr style="height: 5mm">
                        <td style="width: 10mm">序号</td>
                        <td style="width: 100mm">工作内容</td>
                        <td style="width: 30mm">实施日期</td>
                        <td style="width: 45mm">实施部门</td>
                        <td style="width: 30mm">主要负责人</td>
                        <td style="width: 80mm">实施成果</td>
                        <td style="width: 40mm">备注</td>
                    </tr>
                    <tr v-for="(item, i) in 4">
                        <td>{{ scope.item.contentList[i] && scope.item.contentList[i]
                            ? i + 1
                            : "" }}</td>
                        <td>
                            <div v-if="scope.item.contentList[i]">
                                安全情况： <span v-if="scope.item.contentList[i].safeCondition"> 自查：</span>{{
                                    scope.item.contentList[i].safeCondition ?
                                    scope.item.contentList[i].safeCondition : '不涉及该检查项' }}
                            </div>
                            <div v-if="scope.item.contentList[i]">
                                消防情况： <span v-if="scope.item.contentList[i].fireCondition"> 自查：</span>{{
                                    scope.item.contentList[i].fireCondition ?
                                    scope.item.contentList[i].fireCondition : '不涉及该检查项' }}
                            </div>
                            <div v-if="scope.item.contentList[i]">
                                有毒化学药品管理情况： <span v-if="scope.item.contentList[i].chemistryManageCondition"> 自查：</span>{{
                                    scope.item.contentList[i].chemistryManageCondition ?
                                    scope.item.contentList[i].chemistryManageCondition : '不涉及该检查项' }}
                            </div>
                            <div v-if="scope.item.contentList[i]">
                                “三废”处置情况：
                                <span v-if="scope.item.contentList[i].threeWasteCondition"> 自查：</span> {{
                                    scope.item.contentList[i].threeWasteCondition ?
                                    scope.item.contentList[i].threeWasteCondition : '不涉及该检查项' }}
                            </div>
                            <div v-if="scope.item.contentList[i]">
                                水电情况： <span v-if="scope.item.contentList[i].waterElectricCondition"> 自查：</span>{{
                                    scope.item.contentList[i].waterElectricCondition ?
                                    scope.item.contentList[i].waterElectricCondition : '不涉及该检查项' }}
                            </div>
                        </td>
                        <td>
                            {{
                                scope.item.contentList[i] && scope.item.contentList[i].checkTime
                            }}
                        </td>
                        <td>
                            {{
                                scope.item.contentList[i] && scope.item.contentList[i].deptName
                            }}
                        </td>
                        <td>
                            {{ scope.item.contentList[i] && scope.item.contentList[i].checkUserName }}
                        </td>
                        <td>
                            <div v-if="scope.item.contentList[i]">
                                安全情况：{{ scope.item.contentList[i].safeConditionResult == 0 ? '不符合管理制度要求' : '符合管理制度要求' }}
                            </div>
                            <div v-if="scope.item.contentList[i]">
                                消防情况：{{ scope.item.contentList[i].fireConditionResult ? '不符合管理制度要求' : '符合管理制度要求' }}
                            </div>
                            <div v-if="scope.item.contentList[i]">
                                有毒化学药品管理情况：{{ scope.item.contentList[i].chemistryManageConditionResult ? '不符合管理制度要求' :
                                    '符合管理制度要求' }}
                            </div>
                            <div v-if="scope.item.contentList[i]">
                                三废情况：{{ scope.item.contentList[i].threeWasteConditionResult ? '不符合管理制度要求' : '符合管理制度要求' }}
                            </div>
                            <div v-if="scope.item.contentList[i]">
                                水电情况：{{ scope.item.contentList[i].waterElectricResult ? '不符合管理制度要求' : '符合管理制度要求' }}
                            </div>
                        </td>

                        <td>

                        </td>
                    </tr>
                </table>
                <!-- 底部信息位置 -->
                <div class="desc" style="display: flex;
          text-align:left;
            align-items: center;
            margin-top: 10px;
            }">
                </div>
                <div class="page-bottom" style="page-break-after: always">
                    <div class="desc">注：本表格自2021年6月1日起生效。</div>
                </div>
            </template>
        </PrintBox>
    </div>
</template>

<script>
import printStyle from "@/utils/print.js";

import {
    listSafeManageCheck,
    delSafeManageCheck,
    effectauditPlan,
    signFile,
    selectListPrint
} from "@/api/secure/housekeeping.js";
export default {
    name: "listmanagerAudit",
    data() {
        return {
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            dataList: [],
            // 遮罩层
            loading: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                auditYear: undefined,
            },
            // 日期范围
            dateRange: [],
            openFile: false,
            type: 1,
            current: {},
            formData: { filePath: undefined },
            infos: [], //勾选的数据
            printList: [
            ],
            printList1: []

        };
    },
    created() {
        const str = sessionStorage.getItem('queryParams');
        console.log(JSON.parse(str));
        if (str) {
            this.queryParams = JSON.parse(str);
            setTimeout(() => {
                sessionStorage.removeItem('queryParams');
            }, 500)
        }
        this.getList();
    },
    methods: {
        printBox() {
            //infos  勾选的数据 如果有勾选就打印勾选。
            if (this.infos.length) {
                this.printList = this.infos;
            } else {
                //反之打印当前整个列表
                this.printList = this.dataList;
            }
            setTimeout(() => {
                document.title = "年度管理评审工作计划 STET/B/13-1";
                this.$print({
                    printable: "printBox", //打印区域id
                    type: "html", //打印类型是html
                    scanStyles: false,
                    targetStyles: ["*"],
                    style: this.workStyle(),
                    onPrintDialogClose: () => {
                        document.title = process.env.VUE_APP_TITLE;
                    },
                });
            }, 500);
        },
        printBox1() {
            let contentList = []
            selectListPrint({ ids: this.ids.toString() }).then((res) => {
                contentList.push(...res.data)
            });
            this.printList1 = [
                {
                    contentList: contentList,
                },
            ];
            console.log(this.printList1);
            // //infos  勾选的数据 如果有勾选就打印勾选。
            // if (this.infos.length) {
            //     this.printList = this.infos;
            // } else {
            //     //反之打印当前整个列表
            //     this.printList = contentList;
            // }
            setTimeout(() => {
                document.title = "安全工作台账 STET/B/16-2";

                this.$print({
                    printable: "printBox1", //打印区域id
                    type: "html", //打印类型是html
                    scanStyles: false,
                    targetStyles: ["*"],
                    style: this.workStyle(),
                    onPrintDialogClose: () => {
                        document.title = process.env.VUE_APP_TITLE;
                    },
                });
            }, 500);
        },
        // 可以自定义样式  printStyle 是公共样式 切勿私自修改
        workStyle() {
            return `${printStyle}
        table,
        table tr th,
        table tr td {
          height:20mm;
          padding: 4px;
        }
        .desc{
        text-align: left; font-size: 12px; margin-top: 10px
      }
            .df {
                display: flex;
              }
      `;
        },
        handleFile(row, type, isEdit = false) {
            try {
                this.formData = { filePath: undefined };
                this.type = type;
                this.current = row;
                this.isEdit = false;
                if (this.type == 1 && this.current.firstSignFile) {
                    this.formData.filePath = this.current.firstSignFile;
                    this.isEdit = true;
                }
                if (this.type == 2 && this.current.endSignFile) {
                    this.formData.filePath = this.current.endSignFile;
                    this.isEdit = true;
                }
                if (this.type == 3 && this.current.report) {
                    this.formData.filePath = this.current.report;
                    this.isEdit = true;
                }
                if (isEdit) this.isEdit = false
            } catch (error) {
                console.log(error);
            }
            this.openFile = true;
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
            this.ids = selection.map((item) => item.safeManageCheckId);
            this.single = selection.length != 1;
            this.multiple = !selection.length;
            this.infos = selection;

        },

        /** 修改按钮操作 */
        handleUpdate(row) {
            const configId = row.safeManageCheckId || this.ids;
            this.$router.push("./housekeepingAdd?isEdit=true&id=" + configId);
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["elForm"].validate((valid) => {
                if (valid) {
                    this.formData.type = this.type;
                    this.formData.safeManageCheckId = this.current.safeManageCheckId;
                    signFile(this.formData).then((response) => {
                        this.$modal.msgSuccess("操作成功");
                        this.openFile = false;
                        this.getList();
                    });
                }
            });
        },
        handleDetail(row) {
            // sessionStorage.setItem('queryParams', JSON.stringify(this.queryParams));

            this.$router.push(
                "./housekeepingAdd?isInfo=true&id=" + row.safeManageCheckId
            );
            // this.$router.push({
            //     path: "/manageAudit/process/detail/" + row.piid,
            //     query: {
            //         definitionId: null,
            //         deployId: null,
            //         taskId: null,
            //         finished: false,
            //         id: row.safeManageCheckId,
            //     },
            // });
            // this.$router.push("./addBuy?isInfo=true&id=" + row.deviceBuyId);
        },
        // 更多操作触发
        handleCommand(command, row) {

            switch (command) {
                case "handleDelete":
                    this.handleDelete(row);
                    break;
                case "handleFileFirst":
                    this.handleFile(row, 1);
                    break;
                case "handleFileLast":
                    this.handleFile(row, 2);
                    break;
                case "handleSummary":
                    this.handleFile(row, 3);
                    break;
                case "handleCorrent":
                    this.handleCorrent(row);
                    break;
                case "addLogConent":
                    this.addLogConent(row);
                    break;
            }
        },
        addLogConent(row) {
            sessionStorage.setItem('queryParams', JSON.stringify(this.queryParams));

            this.$router.push("./addInAudit?planId=" + row.safeManageCheckId);
        },
        handleStatusChange(row) {
            let text = row.effectStatus == "1" ? "启用" : "禁用";
            this.$modal
                .confirm(
                    '确认要"' + text + '""' + row.safeManageCheckId + '"数据吗？'
                )
                .then(function () {
                    return effectauditPlan(row.safeManageCheckId, row.effectStatus);
                })
                .then(() => {
                    this.$modal.msgSuccess(text + "成功");
                })
                .catch(function () {
                    row.effectStatus = row.effectStatus == "0" ? "1" : "0";
                });
        },

        /** 删除按钮操作 */
        handleDelete(row) {
            const configId = row.safeManageCheckId || this.ids;
            let name = this.checkRow(
                configId,
                this.dataList,
                "safeManageCheckId",
                "DELETE",
                "year"
            );
            this.$modal
                .confirm('是否确认删除id为"' + configId + '"的数据项？')
                .then(function () {
                    return delSafeManageCheck(configId);
                })
                .then(() => {
                    this.getList();
                    this.$modal.msgSuccess("删除成功");
                })
                .catch(() => { });
        },
        handleAdd() {
            this.$router.push("./housekeepingAdd");
        },
        /** 查询列表 */
        getList() {
            this.loading = true;
            listSafeManageCheck(
                this.addDateRangeTime(
                    this.queryParams,
                    this.dateRange,
                    "startAuditDate",
                    "endAuditDate"
                )
            ).then((response) => {
                this.dataList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        handleExport() {
            this.download(

                "system/managerAudit/export",
                {
                    ...this.queryParams,
                },
                `管理审核计划记录表_${this.parseTime(
                    new Date().getTime(),
                    "{y}-{m}-{d}"
                )}.xlsx`
            );
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.dateRange = [];
            this.resetForm("queryForm");
            this.handleQuery();
        },
    },
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__body {
    img {
        width: 100%;
    }
}</style>
